<!--当el-table元素中注入data对象数组后，
    在el-table-column中用prop属性来对应对象中的键名即可填入数据，
    用label属性来定义表格的列名。可以使用width属性来定义列宽。-->
<template>
    <div class="container">
        <!--搜索表单开始-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="formInline.cusName" placeholder="审批人"></el-input>
            </el-form-item>

            <el-form-item label="手机号">
                <el-input v-model="formInline.cusPhone" placeholder="审批人手机号"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--搜索表单结束-->
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column
                    prop="id"
                    label="日期"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="cusName"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="cusPhone"
                    label="手机号">
            </el-table-column>
            <el-table-column
                    prop="sheZhang"
                    label="数量">
            </el-table-column>
            <el-table-column
                    :formatter="dataFormat"
                    prop="createTime"
                    label="日期">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="repayment(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20]"
                :page-size=pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
        </el-pagination>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                tableData: []
                , page: 1
                , total: 0
                , pageSize: 10
                , formInline: {
                    cusName: '',
                    cusPhone: ''
                }
            }
        }
        , created: function () {
            this.getData(1);
        }
        , methods: {
            repayment(row) {
                console.log(row);
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    this.$message({
                        type: 'success',
                        message: '你的邮箱是: ' + value + ' : ' + row.id
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
            , handleClick(row) {
                console.log(row);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
            , handleSizeChange(val) {
                this.pageSize = val;
                this.getData(1);
            }
            , handleCurrentChange(val) {
                this.getData(val);
            }
            , onSubmit() {
                this.getData(1);
            }
            , getData(page) {
                this.page = page;
                var vm = this
                axios.post('http://localhost:8080/bill/list', {
                    "pageNum": page,
                    "pageSize": this.pageSize,
                    "cusName": this.formInline.cusName,
                    "cusPhone": this.formInline.cusPhone
                })
                    .then(function (response) {
                        vm.page = response.data.pageNum;
                        vm.total = response.data.total;
                        vm.pageSize = response.data.pageSize;
                        vm.tableData = response.data.rows;
                    })
            }
            , dataFormat: function (row, column) {
                let data = row[column.property]
                if (data === null) {
                    return ''
                }
                let dt = new Date(data)
                // console.log("dt"+dt);
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            }
        }
    }
</script>